<template>
  <div class="homepage">
    <nav>
      <h3>管理系统</h3>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <div class="changebtn">
          <el-radio-button
            :label="false"
            v-show="isCollapse"
            style="background: #f0f2f5"
            >展开</el-radio-button
          >
          <el-radio-button
            :label="true"
            v-show="!isCollapse"
            style="background: #f0f2f5"
            >收起</el-radio-button
          >
        </div>
      </el-radio-group>
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        unique-opened
        router
        :default-active="currouter"
        background-color="#051535"
        text-color="#fff"
      >
        <div v-for="v in treelist" :key="v.i">
          <el-submenu v-if="v.child" :index="v.i">
            <p slot="title">
              <i :class="v.img"></i>
              <span slot="title" v-show="!isCollapse">{{ v.text }}</span>
            </p>
            <el-menu-item-group>
              <el-menu-item
                v-for="child in v.child"
                :key="child.i"
                :index="child.i"
                >{{ child.text }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else :index="v.i">
            <i :class="v.img"></i>
            <span slot="title">{{ v.text }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </nav>
    <main>
      <header>
        <span>首页>{{ 1 }}>{{ 1 }}</span>
        <div class="headinfo">
          <span>{{ username }}</span>
          <router-link to="/home/personal" class="headimg"
            ><img :src="img"
          /></router-link>
        </div>
      </header>
      <section>
        <el-card>
          <router-view></router-view>
        </el-card>
      </section>
    </main>
  </div>
</template>

<script>
import { getcuruserinfo } from "@/apis/users";
export default {
  data() {
    return {
      currouter: "",
      isCollapse: false,
      username: "",
      img: "",
      treelist: [
        { i: "/home/", img: "el-icon-menu", text: "后台首页" },
        { i: "/home/order", img: "el-icon-chat-line-square", text: "订单管理" },
        {
          i: "/home/product",
          img: "el-icon-shopping-bag-1",
          text: "商品管理",
          child: [
            { i: "/home/productlist", text: "商品列表" },
            { i: "/home/productadd", text: "商品添加" },
            { i: "/home/producttype", text: "商品分类" },
          ],
        },
        { i: "/home/store", img: "el-icon-menu", text: "店铺管理" },
        {
          i: "/home/account",
          img: "el-icon-coordinate",
          text: "账号管理",
          child: [
            { i: "/home/account", text: "账号列表" },
            { i: "/home/addaccount", text: "添加账号" },
            { i: "/home/changepwd", text: "修改密码" },
          ],
        },
        {
          i: "/home/all",
          img: "el-icon-pie-chart",
          text: "销售统计",
          child: [
            { i: "/home/productall", text: "商品统计" },
            { i: "/home/orderall", text: "订单统计" },
          ],
        },
        { i: "/home/money", img: "el-icon-sell", text: "开通会员" },
      ],
    };
  },
  methods: {},
  created() {
    this.currouter = window.location.hash.replace("#", "");
    getcuruserinfo({
      id: JSON.parse(window.localStorage.getItem("userid")),
    }).then((res) => {
      let newimgurl = res.data.accountInfo.imgUrl.replace(
        "127.0.0.1",
        "59.110.235.240"
      );
      this.username = res.data.accountInfo.account;
      this.img = newimgurl;
    });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/styles/themes.less");
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border: 0;
}

.homepage {
  width: 100%;
  height: 100%;
  display: flex;

  nav {
    background: @bgccolor1;
    display: flex;
    flex-direction: column;

    h3 {
      color: @cfff;
      text-align: center;
      white-space: nowrap;
      line-height: 68px;
    }
    .changebtn {
      display: flex;
      justify-content: flex-end;
      span {
        border: 0;
        background: #f0f2f5;
      }
    }
    ul {
      flex: 1;
    }
  }
  main {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    header {
      display: flex;
      justify-content: space-between;
      background: @bgccolor1;
      color: @cfff;
      line-height: 48px;
      padding: 10px 20px;
      .headinfo {
        display: flex;

        .headimg {
          width: 48px;
          height: 48px;
          overflow: hidden;
          border-radius: 50%;
          margin-left: 30px;
          img {
            width: 48px;
            height: 48px;
          }
        }
      }
    }
    section {
      background: #f0f2f5;
      // height: 100%;
      overflow: auto;
      flex: 1;
      padding: 20px;
    }
  }
}
</style>